<template>
  <nav class="navbot">
    <ul>
      <li>
        <router-link to="/index">
          <a href="javascript:;">
            <img src="images/nav1.png" alt class="n_img" />
            <img src="images/nav1_h.png" alt class="n_img2" />
            <p>首页</p>
          </a>
        </router-link>
      </li>
      <li>
        <router-link to="/home">
          <a href="javascript:;">
            <img src="images/nav2.png" alt class="n_img" />
            <img src="images/nav2_h.png" alt class="n_img2" />
            <p>房源</p>
          </a>
        </router-link>
      </li>
      <li>
        <router-link to="/info">
          <a href="javascript:;">
            <img src="images/nav3.png" alt class="n_img" />
            <img src="images/nav3_h.png" alt class="n_img2" />
            <p>资讯</p>
          </a>
        </router-link>
      </li>
      <li>
        <router-link to="/my">
          <a href="javascript:;">
            <img src="images/nav4.png" alt class="n_img" />
            <img src="images/nav4.png" a lt class="n_img2" />
            <p>我的</p>
          </a>
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  // 组件名称
  name: "Nav",
  // 加载页面的子组件（也没面分离的内容）
  components: "",
  data() {
    return {
      // 定义变量
    };
  },
};
</script>

<style lang="less">
// 默认第2张图片（有颜色的）不显示
nav.navbot ul li .n_img2 {
  display: none;
}

// 导航当前选中的
nav.navbot ul .active .n_img {
  display: none;
}

nav.navbot ul .active .n_img2 {
  display: block;
}

// 导航选中的字体颜色
nav.navbot ul .active p {
  color: #6e2d35;
}
</style>